<template>
  <div
    class="bbs-detail"
    v-if="row.hasOwnProperty('id')"
    style="padding-top: 10px"
  >
    <el-row :gutter="20">
      <el-col :span="18">
        <!-- 话题详情 -->
        <Topic :row="row" :topicStatus="topicStatus" />
        <el-card class="box-card" style="margin-top: 10px">
          <!-- 评论 -->
          <Comment :row="row" :topicStatus="topicStatus" />
        </el-card>
      </el-col>
      <el-col :span="6" :class="{ 'author-wrap': scrollTop >= 90 }">
        <!-- 作者信息 -->
        <Avatar class="author" :row="row" />
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  components: {
    Comment: () => import('../comment/index.vue'),
    Avatar: () => import('./Avatar.vue'),
    Topic: () => import('./Topic.vue'),
  },
  data() {
    return {
      row: {},
      scrollTop: 0,
    }
  },
  computed: {
    topicStatus() {
      return this.row.status == 1 && this.row.auditStatus == 2
    },
  },
  mounted() {
    this.getInfo()
    this.$bus.$on('queryTopicById', this.getInfo)
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    this.$bus.$off('queryTopicById')
  },
  methods: {
    async getInfo() {
      let { id } = this.$route.query
      if (!id) return
      let res = await this.$store.dispatch('queryBbsTopicById', id)
      this.row = res.data[0]
    },
    handleScroll() {
      this.scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop // 滚动条偏移量
    },
  },
}
</script>
<style scoped lang="scss">
.author-wrap {
  position: relative;
  .author {
    position: fixed;
    top: 70px;
    width: 335px;
  }
}
</style>